<template>
  <el-dialog
    title="订单信息"
    :visible.sync="centerDialogVisible"
    :close-on-click-modal=false
    :modal-append-to-body=false
    :append-to-body=false
    :destroy-on-close="true"
    width="40%"
    center>

    <div class="dialog-context">
      <el-form label-position="right" label-width="100px" :model="order" class="deepInput">
        <el-form-item label="订单编号:">
          <el-input v-model="order.orderId" readonly></el-input>
        </el-form-item>
        <el-form-item label="起点地:">
          <el-input v-model="order.departure" readonly></el-input>
        </el-form-item>
        <el-form-item label="终点地:">
          <el-input v-model="order.destination" readonly></el-input>
        </el-form-item>
        <el-form-item label="发货人:">
          <el-input v-model="order.posterName" readonly></el-input>
        </el-form-item>
        <el-form-item label="发货人电话:">
          <el-input v-model="order.posterPhoneNumber" readonly></el-input>
        </el-form-item>
        <el-form-item label="收货人:">
          <el-input v-model="order.receiverName" readonly></el-input>
        </el-form-item>
        <el-form-item label="收货人电话:">
          <el-input v-model="order.receiverPhoneNumber" readonly></el-input>
        </el-form-item>
        <el-form-item label="重量:">
          <el-input v-model="order.weight" readonly></el-input>
        </el-form-item>
        <el-form-item label="运费:">
          <el-input v-model="order.price" readonly></el-input>
        </el-form-item>
        <el-form-item label="订单状态:">
          <el-input v-model="state" readonly></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="closeDialog">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name:'Confirm',
  props:['order'],
  data() {
    return {
      centerDialogVisible: false,
      type:['订单编号','起点地','目的地','重量','发货人','发货人电话','收货人','收货人电话','运费','订单状态'],
      orderStates:['已揽收','待运输','运输中','已送达']
    }
  },
  methods:{
    open(){
     this.centerDialogVisible = true;
    },

    isShow(key){
      if(key !== 'weight' && key !== 'price' && key != 'state'){
        return true;
      }else{
        return false;
      }
    },
    closeDialog(){
      this.centerDialogVisible = false;
    }
  },
  computed:{
    state(){
       return this.orderStates[this.order.state]
    }
  }
}
</script>

<style scoped>
.el-dialog__wrapper{

}

.dialog-context{
  margin: 0 auto;
  width: 400px;

}
.dialog-context ul{
  list-style: none;
  color:black;
  font-size: 20px;
}
.dialog-context ul li{
  margin: 10px 40px;
}

.deepInput>>>.el-input__inner{
  border: 0;
}
</style>
